<template>
  <master :title="name + ' 表数据'">
    <div class="searchForm">
      <div class="searchFormInputs" style="flex:1;">
        <el-input
          class="searchFormInput"
            v-model="sql"
            type="textarea"
            placeholder="查询语句"
          ></el-input>
      </div>
      <div class="searchFormBtn">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchList"
          >查询</el-button>
        <el-button
          type="warning"
          @click="add"
          >新增数据</el-button>
        <el-button
          type="danger"
          @click="$back"
          >返回</el-button
        >
      </div>
    </div>
    <el-table :data="rows" stripe style="width: 100%">
      <el-table-column :width="(col.length * 13) < 100 ? 100 : (col.length * 13)" v-for="col in cols" :label="col">
        <template slot-scope="scope">
          <div @dblclick="show(scope.row[col])" :title="scope.row[col]" style="height: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
            {{scope.row[col]}}
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="300" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="success"
            size="mini"
            icon="el-icon-message"
            @click="copy(scope.row)"
            >复制</el-button
          >
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="delet(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="'请谨慎操作'" :visible.sync="visible">
      <el-form ref="editForm">
        <el-form-item label="执行语句">
          <el-input
            type="textarea"
            v-model="editSql"
            rows="8"
            placeholder="请输入执行SQL"
          ></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button
            type="primary"
            @click="visible = false"
            >取消</el-button
          >
          <el-button
            type="danger"
            @click="save"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </master>
  </template>
  <script type="text/javascript">
  (function (G) {
    G.vue({
    "usingComponents": {
      "master": "/components/Master/Master",
      "listpage": "/components/List/Page/Page"
    },
    "enablePullDownRefresh": true
  },{
      data: {
        rows:[],
        cols:[],
        dbn:'',
        sql:'',
        id:'',
        pri:'',
        editSql:'',
        visible:false
      },
      methods: {
        async searchList(){
          let tables = await G.post('/v1/datasource/test',{ id:this.id,content:this.sql },null,{ loading:true,timeout:10 * 60 * 1000 })
          this.cols = []
          for(let key in tables[0]) this.cols.push(key)
          this.rows = tables
        },
        show(msg){
          G.alert(msg)
        },
        async copy(item){
          let msg = JSON.stringify(item)
          console.log(msg)
          try{
            await navigator.clipboard.writeText(msg)
            G.toask('复制成功')
          }catch(e){
            G.alert('请打开开发者工具在控制台中手动复制')
          }
        },
        async save(){
          let res = await G.post('/v1/datasource/test',{ id:this.id,content:this.editSql },null,{ loading:true,timeout:10 * 60 * 1000 })
          this.visible = false
          if(!res.errorMsg) {
            G.toask('操作成功')
            await this.searchList()
          }
        },
        async delet(item){
          this.editSql = `DELETE FROM ${ this.name } WHERE ${ this.pri }='${ item[this.pri] }';`
          this.visible = true
        },
        async edit(item){
          let cols = []
          for(let key in item) {
            if(key == this.pri) continue
            if(typeof item[key] == 'number') {
              cols.push(`${ key }=${ item[key] }`)
            }else if(item[key]){
              cols.push(`${ key }='${ item[key] }'`)
            }
          }
          this.editSql = `UPDATE ${ this.name } SET\n${ cols.join(',\n') }\nWHERE ${ this.pri }='${ item[this.pri] }';`
          this.visible = true
        },
        add(){
          let cols = [],values = []
          for(let key in this.rows[0]) {
            cols.push(key)
            values.push(this.rows[0][key] ? `'${ this.rows[0][key] }'` : 'NULL')
          }
          this.editSql = `INSERT INTO ${ this.name } (${cols.join(',')}) VALUES (\n${values.join('\n')}\n);`
          this.visible = true
        }
      },
      async mounted(query) {
        this.dbn = query.dbn
        this.name = query.name
        this.id = query.id
        let res = await G.post('/v1/datasource/test',{ id:this.id, content:`SHOW COLUMNS FROM ${ this.name } WHERE COLUMNS.Key = 'PRI';` })
        this.pri = res[0] ? res[0].Field : 'id'
        this.sql = `SELECT * FROM ${this.name} ORDER BY ${ this.pri } DESC LIMIT 10;`
        this.searchList()
      }
    });
  })(Y)
  </script>
  <style scoped>
  
  </style>
